<template>
	<view class="content">
		<u-form :model="userInfos" ref="form1" class="user-list list-border">
			<u-form-item label="姓名" prop="name" label-width="120">
				<u-input placeholder="请填写姓名" v-model="userInfos.name" />
			</u-form-item>
			<u-form-item>
				<u-checkbox-group @change="checkboxChange">
					<u-checkbox v-model="item.checked" v-for="(item, index) in list" :key="index"
						:name="item.name">{{item.name}}</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<u-form-item label="身份证" prop="sfid" label-width="120">
				<u-input placeholder="请填写身份证" type="idcard" :maxlength="18" v-model="userInfos.sfid" />
			</u-form-item>
			<u-form-item label="手机号" prop="phone" label-width="120">
				<u-input placeholder="请填写手机号" :maxlength="11" v-model="userInfos.phone" />
			</u-form-item>
			<u-form-item label="地址" prop="dzname" label-width="120">
				<u-input placeholder="请输入地址" v-model="userInfos.dzname" />
			</u-form-item>
			<u-form-item label="备注" prop="Memo" label-width="120">
				<u-input type="textarea" placeholder="请输入申请备注" v-model="userInfos.Memo" />
			</u-form-item>
		</u-form>
		<u-select v-model="select1.show" :list="select1.list" @confirm="onSelect1"></u-select>
		<view class="bottom-button">
			<!-- <u-button shape="circle" type="primary" size="default" @click="submit">提交</u-button> -->
			<view class="button" @click="submit">
				<span>提交</span>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				list: [{
						name: '发票',
						checked: true,
						disabled: false
					},
					{
						name: '住院清单',
						checked: true,
						disabled: false
					}
				],
				sexs: '请选择',
				show: false,

				tips: '',
				value: '',
				userInfos: {
					Memo: '',
					dzname: '',
					name: '',
					sex: '',
					sfid: '',
					phone: '',
					checkbox: '发票,住院清单'
				},
				select1: {
					show: false,
					current: {},
					list: [{
							value: 1,
							label: '男'
						},
						{
							value: 2,
							label: '女'
						}
					],
				},
				useyzm: '',
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					dzname: [{
						required: true,
						message: '请输入地址',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					sfid: [{
							required: true,
							message: '请输入身份证',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
							transform(value) {
								return String(value);
							},
							message: '请输入正确身份证',
							trigger: 'blur,change'
						}
					],
					phone: [{
							required: true,
							message: '请输入就诊人手机号',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							len: 11,
							message: '请正确输入11位手机号',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						}
					]
				},

			}
		},
		watch: {
			value(newValue, oldValue) {
				//console.log('v-model', newValue);
			}
		},
		computed: {
			...mapState(['token'], ['userInfo']),
			...mapGetters(['hasLogin', 'getuserInfos']),
			getIcon() {
				return path => {
					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
				}
			}
		},

		onShow() {
			if (this.hasLogin) {

			} else {

				uni.showModal({
					title: '提示',
					content: '登录后才可以操作',
					confirmText: '去登录',
					showCancel: false,
					success: function(res) {
						uni.reLaunch({
							url: '/pages/auth/login'
						})
					}
				});
				return;
			}

		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		},
		methods: {
			checkboxChange(e) {
				// console.log(e[0])
				if (e.length == 1) {
					this.userInfos.checkbox = e[0]
				} else if (e.length == 2) {
					this.userInfos.checkbox = e[0] + ',' + e[1]
				} else {
					this.userInfos.checkbox = ''
				}
				console.log(this.userInfos.checkbox);
			},
			onSelect1(arr) {
				let current = arr[0];
				let label = current.label;
				this.select1.current = current;
				this.userInfos.sex = label;
				console.log("this.userInfos.sex", this.userInfos.sex)
			},
			submit() {
				this.$refs.form1.validate(valid => {
					if (valid) {
						this.addvisit()
						console.log('验证通过');
					} else {
						// uni.redirectTo({
						// 	url: `/pages/My/fapiao/fapiao`,
						// 	fail(error) {
						// 		console.log(error)
						// 	}
						// })
						// return
						console.log('验证失败');
					}
				});
			},
			cancel() {
				this.show = false
			},
			confirm(e) {
				this.sexs = e.value[0]
				this.userInfos.sex = e.value[0]
				this.show = false
			},
			addvisit() {

				// console.log(this.userInfos)
				uni.showLoading({
					title: '提交中'
				})
				let user = this.userInfos
				this.$request('sqd', 'submit', {
					SQDId: '',
					LxrName: user.name,
					Address: user.dzname,
					SFZ: user.sfid,
					Mobile: user.phone,
					Category: user.checkbox,
					Memo: user.Memo
				}).then(res => {
					console.log(res)
					if (res.code == 1) {

						uni.hideLoading();
						uni.redirectTo({
							url: `/pages/My/fapiao/fapiao`,
							fail(error) {
								console.log(error)
							}
						})
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				console.log(this.userInfos.phone)
				if (this.userInfos.phone == "") {
					this.showToast(this.list)
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {
				console.log('change', e);
			}
		}
	}
</script>

<style>
	@import './fapiao.css';
</style>